import { initExecute } from '../../../../../common/utils/index.js';
// 多分页列表，且它们的filter共用同一个头部区域
const TableTabs = (hook, { SuperTable, TableFilter, Tabs }) => {
	const { $native } = hook.$m;
	return {
		isJiess: true,
		name: 'TableTabs',
		setup({ tables, headParam, defaultKey = 1, ...other }) {
			const { $ref } = hook.$m;
			const execFunc = initExecute.call(this);
			const headNode = $ref();
			const mapping = {};
			this.onMounted(() => {
				headNode.value = mapping[defaultKey].node;
			});
			this.add({ $slot: 'header' },
				// ---------------------
				{ children: { $proxy: headNode }, ...headParam },
				// ---------------------
				{ $slot: 'middle' },
				// ---------------------
				{
					is: Tabs,
					defaultActiveKey: defaultKey,
					onChange: (e) => {
						const { node } = mapping[e] || {};
						if (node) headNode.value = node;
					},
					items: tables.map(({ tabTitle, filter, ...tabOther }, i) => {
						return {
							key: `${i+1}`,
							label: tabTitle,
							children: $native({
								is: SuperTable,
								filter(midder) {
									const node = execFunc(filter, [midder]);
									mapping[`${i+1}`] = { midder, node };
									headNode.value = node;
								},
								...tabOther
							})
						};
					}),
					...other
				}, { $slot: 'footer' })
		}
	}
};
export default TableTabs;